<template>
  <div class="home-view">
    <header>
      <van-tabs v-model="active" sticky animated line-width="25px" line-height="5px">
        <van-tab disabled></van-tab>
        <van-tab disabled></van-tab>
        <van-tab disabled></van-tab>
        <van-tab title="发现">
          <FoundView />
        </van-tab>
        <van-tab title="粮仓">
          <Granary-View />
        </van-tab>
        <van-tab disabled></van-tab>
        <van-tab disabled></van-tab>
        <van-tab disabled></van-tab>
      </van-tabs>
    </header>

    <main>
      <!-- <keep-alive> -->
      <router-view></router-view>
      <!-- </keep-alive> -->
    </main>
  </div>
</template>

<script setup lang="ts">
import FoundView from "@/components/HomeComponents/FoundComponents/FoundView.vue";
import GranaryView from "@/components/HomeComponents/GranaryComponents/GranaryView.vue"; 

import { ref } from "vue"


const active = ref(0);

// 定义异步组件
</script>

<style lang="scss" scoped>
.home-view {
  width: 100vw;
  height: 100vh;
  // position: fixed;bug
  top: 0;
  left: 0;
  z-index: 8;

  header {
    width: 100vw;
  }

  ::v-deep(.van-tabs__line) {
    background-color: #14c3bc !important;
  }

  ::v-deep(.van-tab) {
    color: #b2b2b2 !important;
    font-weight: bolder !important;
  }

  ::v-deep(.van-tab--active) {
    color: #000 !important;
    font-size: 18px !important;
  }

  ::v-deep(.van-icon) {
    padding: 4px;
  }

  ::v-deep(.van-field__control) {
    font-size: 12px !important;
  }

}
</style>